<template>
  <div class="person">

  </div>

</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {type PersonInter, type Persons} from '@/types' // 加上type表明这是个类型 
//-------------------数据--------------------
// js
let person: PersonInter = { name: 'find', age: 12, id: '1' }

let personList:Array<PersonInter> = [ // 是个数组 而且里面的泛型 就是PersonInter的类型 限制
  { name: 'find', age: 12, id: '1' },
  { name: 'find1', age: 112, id: '12' },
  { name: 'find2', age: 112, id: '14' },
]

let personList2: Persons = [ // 是个数组 而且里面的泛型 就是PersonInter的类型 限制
  { name: 'find', age: 12, id: '1' },
  { name: 'find1', age: 112, id: '12' },
  { name: 'find2', age: 112, id: '14' },
]
</script>

<style scoped >
  /*  加上这个scoped 只能在本vue有效  无脑加*/
  .person {
    background-color: pink;
  }

  button {
    margin: 0 5px;
  }
</style>